{{ if $.Site.Params.nightMode }}
<body class="io-black-mode">
{{ else }}
<body class="io-grey-mode">
{{ end }}
    {{ if $.Site.Params.enablePreLoad }}
    <div id="loading">
        <style>
            .loader {
                width: 250px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-family: helvetica, arial, sans-serif;
                font-weight: 900;
                color: #f1404b;
                letter-spacing: 0.2em
            }

            .loader::before,
            .loader::after {
                content: "";
                display: block;
                width: 15px;
                height: 15px;
                background: #f1404b;
                position: absolute;
                animation: load .7s infinite alternate ease-in-out
            }

            .loader::before {
                top: 0
            }

            .loader::after {
                bottom: 0
            }

            @keyframes load {
                0% {
                    left: 0;
                    height: 30px;
                    width: 15px
                }

                50% {
                    height: 8px;
                    width: 40px
                }

                100% {
                    left: 235px;
                    height: 30px;
                    width: 15px
                }
            }
        </style>
        <div class="loader">{{ $.Site.Params.textPreLoad }}</div>
    </div>
    {{ end }}
    <div class="page-container">
	{{ if $.Site.Params.expandSidebar }}
	<div id="sidebar" class="sticky sidebar-nav fade animate-nav" style="width: 170px">
        {{ else }}
        <div id="sidebar" class="sticky sidebar-nav fade mini-sidebar" style="width: 60px;">
	{{ end }}
            <div class="modal-dialog h-100 sidebar-nav-inner">
                <div class="sidebar-logo border-bottom border-color">
                    <!-- logo -->
                    <div class="logo overflow-hidden">
                        <a href="" class="logo-expanded">
                            <img src="{{ relURL $.Site.Params.images.logoExpandLight }}" height="40" class="logo-light"
                                alt="{{ .Site.Title }}">
                            <img src="{{ relURL $.Site.Params.images.logoExpandDark }}" height="40" class="logo-dark d-none"
                                alt="{{ .Site.Title }}">
                        </a>
                        <a href="" class="logo-collapsed">
                            <img src="{{ relURL $.Site.Params.images.logoCollapseLight }}" height="40" class="logo-light"
                                alt="{{ .Site.Title }}">
                            <img src="{{ relURL $.Site.Params.images.logoCollapseDark }}" height="40" class="logo-dark d-none"
                                alt="{{ .Site.Title }}">
                        </a>
                    </div>
                    <!-- logo end -->
                </div>
                <div class="sidebar-menu flex-fill">
                    <div class="sidebar-scroll">
                        <div class="sidebar-menu-inner">
                            <ul>
                                {{ range .Site.Data.webstack }}
                                    {{ if .list }}
                                    <li class="sidebar-item">
                                        <a href="#{{ range first 1 .list }}{{ md5 .term }}{{ end }}" class="smooth change-href" data-change="#{{ range first 1 .list }}{{ md5 .term }}{{ end }}">    
                                            <i class="{{ .icon }} icon-fw icon-lg mr-2"></i>
                                            <span>{{ .taxonomy }}</span>
                                            <i class="iconfont icon-arrow-r-m sidebar-more text-sm"></i>
                                        </a>
                                        <ul>
                                            {{ range .list }}
                                            <li><a href="#{{ md5 .term }}" class="smooth"><span>{{ .term }}</span></a></li>
                                            {{ end }}
                                        </ul>
                                    </li> 
                                    {{ else }}
                                    <li class="sidebar-item">
                                        <a href="#{{ md5 .taxonomy }}" class="smooth">
                                            <i class="{{ .icon }} fa-lg icon-fw icon-lg mr-2"></i>
                                            <span>{{ .taxonomy }}</span>
                                        </a>
                                    </li>
                                    {{ end }}
                                {{ end }}
                            </ul>           
                        </div>
                    </div>
                </div>
                <div class="border-top py-2 border-color">
                    <div class="flex-bottom">
                        <ul>
                            <li id="menu-item-237"
                                class="menu-item menu-item-type-post_type menu-item-object-page menu-item-237 sidebar-item">
                                <a href="{{ $.Site.Params.upload }}" target="_blank">
                                    <i class="fas fa-file-upload icon-fw icon-lg mr-2"></i>
                                    <span>网站提交</span></a>
                            </li>

			    <li id="menu-item-212"
                                 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-212 sidebar-item">
                                 <a href="#friendlink" class="smooth">
                                     <i class="fab fa-staylinked icon-fw icon-lg mr-2"></i>
                                     <span>友情链接</span>
                                 </a>
                            </li>

                            <li id="menu-item-213"
                                class="menu-item menu-item-type-custom menu-item-object-custom menu-item-213 sidebar-item">
                                <a target="_blank" rel="noopener" href="{{ $.Site.Params.about }}">
                                    <i class="fa fa-info-circle icon-fw icon-lg mr-2"></i>
                                    <span>关于导航</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
